{% extends "base.html" %}

{% block title %}Get Key and Install{% endblock %}

{% block content %}
<h2>Installation Steps</h2>
<h3>Add a Sidebar Widget</h3>
<h4>Step 1. Click the button below</h4>
<form method="post" action="http://www.blogger.com/add-widget">
  <div>
    <input type="hidden" name="infoUrl" value="http://brps.appspot.com"/>
    <input type="hidden" name="widget.title" value=""/>
    <textarea name="widget.content" style="display:none;" id="widget_content" rows="5" cols="80">
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://brps.appspot.com/gas.js&quot;&gt;&lt;/script&gt;
&lt;h2&gt;Related Posts&lt;/h2&gt;
&lt;div id=&quot;gas-results&quot;&gt;&lt;/div&gt;
    </textarea>
    <input type="image" src="/images/add2blogger_lg.gif" alt="Add Related Posts Widget" title="Add Related Posts Widget"/>
  </div>
</form>

<h4>Step 2. Move the new sidebar widget to a position you like</h4>
<p>The new sidebar widget will be created at top of your sidebar, you may want to move it a better place. Remember to save.</p>

<p><b>Tip</b>: You actually can drag this sidebar widget and drop onto after <i>Blog Posts</i> widget, then this widget will show up after <i>comments</i>.</p>

<h4>Step 3. Go to one of your blog post</h4>
You have to see it in action in single post, you will not see the Related Posts list in your home page of your blog. Just randomly choose one of your blog post.

<h3>Add a Sidebar Widget Manually</h3>
<h4>Step 1. Add a HTML/JavaScript on your sidebar in Layout</h4>
<h4>Step 2. Put the following code and Save it</h4>
<pre class="notranslate">
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://brps.appspot.com/gas.js&quot;&gt;&lt;/script&gt;
&lt;h2&gt;Related Posts&lt;/h2&gt;
&lt;div id=&quot;gas-results&quot;&gt;&lt;/div&gt;
</pre>
<h4>Step 3. Move the new sidebar widget to a position you like</h4>
<h4>Step 4. Go to one of your blog post</h4>

<h3>Add after your post</h3>
<img src="/images/RelatedPostsAfterPost.png" class="right" alt="Screenshot of the Widget after your post content" title="Screenshot of the Widget after your post content"/>
<h4>Step 1. Go to Layout/Edit HTML/Edit Template</h4>
<h4>Step 2. BACKUP your template! Do not skip this!</h4>
<h4>Step 3. Check Expand Widget Templates, then Find a block like:</h4>
<pre class="notranslate">
&lt;div class=&apos;post-footer-line post-footer-line-3&apos;/&gt;
  ...
&lt;/div&gt;
</pre>
<h4>Step 4. Add one more line to be:</h4>
<pre class="notranslate">
&lt;div class=&apos;post-footer-line post-footer-line-3&apos;/&gt;
  ...
&lt;/div&gt;
&lt;h2;&gt;Related Posts&lt;/h2&gt;
&lt;div id=&quot;gas-results&quot;&gt;&lt;/div&gt;
</pre>
<h4>Step 5. Go to the end for:</h4>
<pre class="notranslate">
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h4>Step 6. Add two more lines to be:</h4>
<pre class="notranslate">
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://brps.appspot.com/gas.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
{% endblock %}
